<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>组织列表</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/communication.css" rel="stylesheet">
    <link href="../../js/lib/tipTip/tipTip.css" rel="stylesheet">
</head>
<body id="communication">
<div class="container">
    <div class="head">
        <i class="icon iconfont icon-jiantou1"></i>
        <h2>好友列表</h2>
        <div class="nav">
            <a href="personal.html">个人</a>
            <a class="active">组织</a>
        </div>
    </div>

    <div class="content content-org">
        <input id="name" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索(公司名称或编号)" />
        <div class="list-box-container">
            <ul class="list-box">
                <li class="content-container">
                    <div class="head">
                        <div class="title fl"><i class="icon iconfont icon-jiantou"></i><span>公司或组织名称</span><em>/12人</em></div>
                        <div class="icon-list fr">
                            <i class="icon iconfont icon-dianhua active" data-msg="0511-82333333"></i><i class="icon iconfont icon-dingwei"></i><i class="icon iconfont icon-tianjia active" data-msg="成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品（海参）产品的销售。"></i><i class="icon iconfont icon-xinfengpsd"></i>
                        </div>
                    </div>
                    <div class="main hide">
                        <ul>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="content-container">
                    <div class="head">
                        <div class="title fl"><i class="icon iconfont icon-jiantou"></i><span>公司或组织名称</span><em>/12人</em></div>
                        <div class="icon-list fr"><i class="icon iconfont icon-dianhua"></i><i class="icon iconfont icon-dingwei"></i><i class="icon iconfont icon-tianjia"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                    </div>
                    <div class="main hide">
                        <ul>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="content-container">
                    <div class="head">
                        <div class="title fl"><i class="icon iconfont icon-jiantou"></i><span>公司或组织名称</span><em>/12人</em></div>
                        <div class="icon-list fr"><i class="icon iconfont icon-dianhua"></i><i class="icon iconfont icon-dingwei"></i><i class="icon iconfont icon-tianjia"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                    </div>
                    <div class="main hide">
                        <ul>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                            <li>
                                <img src="">
                                <div class="outer">
                                    <div class="inner-top"><span>人名（微信号）</span><i class="icon iconfont icon-shouji active"></i><i class="icon iconfont icon-weixin"></i><i class="icon iconfont icon-icon168"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
                                    <p class="inner-bottom">职务或业务范围</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <a class="plus" href="add-friends.html"><i class="icon iconfont icon-add30"></i></a>
        </div>

    </div>

</div>

<script src="../../js/rem.js"></script>
<script src="../../js/lib/jquery.js"></script>
<script src="../../js/lib/tipTip/jquery.tipTip.js"></script>
<script>
    /*输入框*/
    $('.container .content input').bind('input propertychange', function() {
        if( $(this).val()=='' ){
            $(this).css('background-image','url(../../images/search.png)')
        }else{
            $(this).css('background-image','none')
        }
    });

    /*展开通讯列表*/
    $(".list-box .title").click(function(){
        var dom = $(this).find('.icon-jiantou');
        if(dom.hasClass('active')){
            dom.removeClass('active')
        }else{
            dom.addClass('active')
        }
        $(this).parent().parent().find('.main').fadeToggle(300,'swing')
    });

    /*tips弹窗*/
    $(".icon-list i").tipTip({
        activation:'click',
        maxWidth:"200px",
        defaultPosition: "top",
        delay: 100,
        attribute: "data-msg"
    });

    /*点击图标是否公开*/
    $(".inner-top i").click(function(){
        $(this).hasClass('active') ? $(this).removeClass('active'):$(this).addClass('active');
    })

</script>
</body>
</html>